<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/css/morris.css}">
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/jquery-2.2.3.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/raphael-min.js}"></script>
    <script th:src="@{/js/morris.min.js}"></script>
</head>
<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>数据统计</li>
        <li>入库统计</li>
        <li>基本内容</li>
    </ul>
</div>
<div class="rightinfo">
    <form th:action="@{/rkWarehouse/list1}" method="post" id="stockStatisForm">
        <ul class="tools">
            <input type="hidden" id="pageNum" name="pageNum" th:value="${session.pageNum}">
            <li> 所属区域：
                <select name="provinceId">
                    <option value="0">请选择省份</option>
                    <option th:each="p:${provinceList}"
                            th:selected="${p.id==provinceId}"
                            th:value="${p.id}"
                            th:text="${p.pName}">北京
                    </option>
                </select>
                <!--<input type="hidden" name="cityId" th:value="${cityId}"/>-->
                <select name="cityId">
                    <option value="0">请选择城市</option>
                </select>
            </li>
            <li> 仓库名称:
                <input type="text" name="cName" th:value="${cName}"/>
            </li>
            <li class="subBut" onclick="goPage(1)"><img th:src="@{/images/t06.png}"/>查询</li>
            <li class="subBut" onclick="reset()"><img th:src="@{/images/t03.png}"/>重置</li>
        </ul>
        <table class="tablelist">
            <thead>
            <tr>
                <th>序号</th>
                <th>仓库名称</th>
                <th>负责人</th>
                <th>所属区域</th>
                <th>采购单入库数量</th>
                <th>金额</th>
                <th>入库明细</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="rk,var:${rkpage.list}">
                <td th:text="${(rkpage.pageNum-1)*rkpage.pageSize+var.count}">1</td>
                <td th:text="${rk.warehouse2.cName}">南京21号仓库</td>
                <td th:text="${rk.rkUsers.uname}">朱元璋</td>
                <td th:text="${rk.warehouse2.province.pName+''+rk.warehouse2.city.cName}">江苏南京</td>
                <td th:text="${rk.totalAmount}">5</td>
                <td th:text="'￥'+${rk.totalMoney}">￥9,876,582</td>
                <td>
                    <a th:href="@{/rkWarehouse/rkDetails?cName=}+${rk.warehouse2.cName}" class="tablelink">查看详情</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="pagin">
            <div class="message">
                共<i class="blue" th:text="${rkpage.total}">1256</i>条记录，当前显示第&nbsp;<i class="blue"
                                                                                     th:text="${rkpage.pageNum}">2&nbsp;</i>页
            </div>
            <ul class="paginList">
                <li class="paginItem">
                    <a href="javascript:void(0);" th:onclick="goPage([[${rkpage.isFirstPage?1:rkpage.pageNum-1}]])">
                        <span th:class="${rkpage.isFirstPage?'pagepre':'pagenxt roate'}"></span>
                    </a>
                </li>
                <li th:each="page : ${rkpage.navigatepageNums}"
                    th:class="${page==rkpage.pageNum?'paginItem current':'paginItem'}">
                    <a href="javascript:void(0);" th:text="${page}" th:onclick="goPage([[${page}]])">1</a>
                </li>
                <li class="paginItem">
                    <a href="javascript:void(0);"
                       th:onclick="goPage([[${rkpage.isLastPage?rkpage.pages:rkpage.pageNum+1}]])">
                        <span th:class="${rkpage.isLastPage?'pagepre roate':'pagenxt'}"></span>
                    </a>
                </li>
            </ul>
        </div>
    </form>
</div>
<!-- 统计图 -->
<div style="width: 700px;margin:auto">
    <div>
        <h3>条形统计图</h3>
    </div>
    <div>
        <div class="chart" id="bar-chart"></div>
    </div>
</div>
<script>
    $(function () {
       var provinceId =  $("select[name=provinceId]").val();
       var cityId =  $("select[name=cityId]").val();
       var cName = $("input[name=cName]").val();
        var pageNum = $("#pageNum").val();

        $.get("/erp/rkWarehouse/list3",{
            "provinceId":provinceId,
            "cityId":cityId,
            "cName":cName,
            "pageNum":pageNum
            },
            function (data) {
            // console.log(data);
            //BAR CHART
            new Morris.Bar({
                element: 'bar-chart',
                resize: true,
                data: data,
                barColors: ['#00a65a', '#f56954'],
                xkey: 'wareHouseName',
                ykeys: ['totalAmount', 'totalMoney'],
                labels: ['入库数量', '金额(单位/万)'],
                hideHover: 'auto'
            });

        }, "json");
    });
</script>
<script th:inline="javascript">
    $('.tablelist tbody tr:odd').addClass('odd');

    // 提交表单
    function goPage(num) {
        //submit提交
        $("#pageNum").val(num);
        $("#stockStatisForm").submit();
    }

    // 清空查询条件
    function reset() {
        $("input[name=cName]").val("");
        $("select[name=provinceId]>option:eq(0)").attr("selected", true);
        $("select[name=cityId]>option:eq(0)").attr("selected", true);
    }

    // 根据省份显示其城市
    $(function () {
        ajaxCid($("select[name=provinceId]").val());
        $("select[name=provinceId]").change(function () {
            ajaxCid($(this).val());
        });
    });

    function ajaxCid(pid) {
        var cityId = [[${cityId}]];
        $.ajax({
            url: "/erp/rkWarehouse/ajaxCityPid",
            data: {"pid": pid},
            dataType: "JSON",
            success: function (data) {
                console.log(data);
                // data = JSON.parse(data);
                var op = "<option value='0'>请选择城市</option>";
                $.each(data, function (i, e) {
                    if (e.id == cityId) {
                        op += "<option value='" + e.id + "' selected>" + e.cname + "</option>";
                    } else {
                        op += "<option value='" + e.id + "'>" + e.cname + "</option>";
                    }
                });
                $("select[name=cityId]").html("");
                $("select[name=cityId]").append(op);

            }, error: function () {
                console.log("错误");
            }
        });
    }
</script>
</body>
</html>
